<template>
    <!-- 搜索页 -->
    <div class="search">
        <div class="search-input">
            <form action="/">
                <van-search background="#f6a088" v-model="value" show-action placeholder="请输入搜索关键词" @search="onSearch"
                    @cancel="onCancel" />
            </form>

            <div v-if="value && value.length > 0" class="content">
                {{ value }}
            </div>
        </div>

        <section>
            <h4>热门搜索</h4>
            <div class="list">
                <ul>
                    <li v-for="item in arr" :key="item" @click="onSearch(item)">{{ item.name }}</li>
                </ul>
            </div>
        </section>
    </div>
</template>

<script>
import { Toast } from 'vant';
import { hotSearch } from '@/api';


export default {
    data() {
        return {
            value: '',
            arr: [
                '今日开运菜',
                '最新菜谱',
                '板栗',
                '小白菜',
                '莲藕',
                '润肺止咳吃什么',
                '中小学生学做饭',
                '健脾养胃',
                '家常菜',
                '南瓜饼',
                '下饭菜',
                '豆腐',
                '茄子',
                '牛肉',
                '秋葵',
                '香菇',
                '早饭',
                '洋葱',
                '冬瓜',
            ],
        }
    },
    methods: {
        onSearch(value) {
            console.log(value);

            Toast("待完善中，吃货请等待~");
        },
        onCancel() {
            // Toast('取消');
            this.$router.go(-1);
        },
        // onSearch(val) {
        //     this.$router.push({ path: '/search', query: { keyword: val } });
        // },
        async getHotSearch() {
            await hotSearch()
                .then(res => {
                    let { state, result } = res;
                    if (state === "success") {
                        this.arr = result.suggests;
                    }
                })
                .catch(err => {
                    console.log(err)
                })
        },
    },
    created() {
        this.getHotSearch()
    }
};
</script>

<style lang="less" scoped>
@import url(../common/less/varible.less);

.search {
    width: 100%;

    .search-input {
        width: 100%;
        padding: 10px 0;
        background-color: @borderColor;
        position: relative;

        .content {
            padding: @pad;
            position: absolute;
            top: 60px;
            left: 0;
            width: 100%;
            height: 80px;
            background-color: @color;
            font-size: 15px;
        }
    }

    section {
        margin: 15px;

        h4 {
            font-size: 20px;
            margin-bottom: 10px;
        }

        .list {
            width: 100%;

            ul {
                width: 100%;
                display: flex;
                flex-wrap: wrap;

                li {
                    margin: 5px 5px;
                    padding: 5px 10px;
                    font-size: 10px;
                    color: #666;
                    background-color: #fafafa;
                    border-radius: 5px;
                }
            }
        }
    }
}
</style>